import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actions } from './_index.js'

import ReactPullLoad, { STATS } from "react-pullload";
import "./ReactPullLoad.css";

// const cData = [1, 2, 3, 4, 5];
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ajaxCfg: {
        url: '/home/mediareports',
        cfg: {
          page_number: '1',
          page_size: '10',
        },
        headers: {
        }
      },
      hasMore: true,
      action: STATS.init,
      index: 6,
      page: 1
    }
  }
  _init() {
    //代码初始化
    this.getPddFn(1, [])
  }
  getPddFn(page, prevData) {
    const { getPddFn } = this.props;
    const { ajaxCfg } = this.state
    ajaxCfg.cfg.page_number = page;
    getPddFn('首次启动', ajaxCfg, prevData)
  }
  componentDidMount() {
    this.getPddFn(1, [])
  }
  handleAction = action => {
    // console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if (action === this.state.action) {
      return false;
    }

    if (action === STATS.refreshing) {
      //刷新
      this.handRefreshing();
    } else if (action === STATS.loading) {
      //加载更多
      this.handLoadMore();
    } else {
      //DO NOT modify below code
      this.setState({
        action: action
      });
    }
  };
  handRefreshing = () => {
    if (STATS.refreshing === this.state.action) {
      return false;
    }

    setTimeout(() => {
      //refreshing complete
      this.setState({
        hasMore: true,
        action: STATS.refreshed,
        index: 6
      });
      this._init();
    }, 3000);

    this.setState({
      action: STATS.refreshing
    });
  };
  handLoadMore = () => {
    const { down } = this.props;
    if (STATS.loading === this.state.action) {
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!this.state.hasMore) {
      return;
    }

    setTimeout(() => {
      const { down } = this.props;
      if (this.state.index === 0) {
        this.setState({
          action: STATS.reset,
          hasMore: false
        });
      } else {
        this.setState({
          // data: [...this.state.data, cData[0], cData[0]],
          action: STATS.reset,
          index: this.state.index - 1
        });
      }
      console.log('加载更多')
      this.setState((state, props) => {
        page: state.page++
      })
      this.getPddFn(this.state.page, down.pddApi.data)
    }, 3000);

    this.setState({
      action: STATS.loading
    });
  };
  list() {
    const { down } = this.props;
    return down.pddApi.data.map((val, index) => {
      console.log(val)
      return (
        <li key={index}>
          {index}-----{val.main_title}
        </li>
      )
    })
  }
  render() {
    const { hasMore } = this.state;
    const { down } = this.props
    const arr = {
      a: 1,
      b: 2,
      c: 3
    }
    const arr1 = { c: 4, d: 5, e: 6 }
    console.log({...arr, ...arr1})
    console.info(this.props)
    const fixHeaderStyle = {
      position: "fixed",
      width: "100%",
      height: "50px",
      color: "#fff",
      lineHeight: "50px",
      backgroundColor: "#e24f37",
      left: 0,
      top: 0,
      textAlign: "center",
      zIndex: 1
    };
    console.log(down)
    return (

      <div>
        <div style={fixHeaderStyle}>fixed header</div>
        <ReactPullLoad
          downEnough={150}
          action={this.state.action}
          handleAction={this.handleAction}
          hasMore={hasMore}
          style={{ paddingTop: 50 }}
          distanceBottom={1000}
        >
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          <div style={{ height: '50px', border: '1xp solid red' }}>11111</div>
          {
            down.pddApi
              ?
              <ul>{this.list()}</ul>
              :
              ''
          }
        </ReactPullLoad>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  console.log(state)
  return {
    down: state.downup
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getPddFn: (text, ajaxcfg, prevData) =>
      dispatch(actions.getFn(
        text,
        ajaxcfg,
        dispatch,
        prevData
      ))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);

